<template>
    <div class="index_page_class">
        <div
             style="width: 100%;color: #ffffff;padding: 12px 16px;display: flex;justify-content: space-between;background:rgba(27,43,61,.8)">
            <div style="display: flex">
                <div class="tab_select_btn" :style="{'background':activeName== 'first'? '#307eff':'#455a7c'}"
                     @click="handleActiveClick('first')">
                    联合工房
                </div>
                <div class="tab_select_btn"
                     :style="{'background':activeName== 'second'? '#307eff':'#455a7c','marginLeft':'24px'}"
                     @click="handleActiveClick('second')">
                  联合⼯房⼆层
                </div>
                <div class="tab_select_btn" style="width: 120px"
                     :style="{'background':activeName== 'basement' ? '#307eff':'#455a7c','marginLeft':'24px'}"
                     @click="handleActiveClick('basement')">
                    地下一层配电房
                </div>
            </div>
            <div style="margin: auto 0;">
                <el-radio-group v-model="first_select_radio" size="small" @change="firstSelectOpt"
                                v-show="activeName== 'first'">
                    <el-radio label="1">总区域</el-radio>
                    <el-radio label="2">出入库区</el-radio>
                    <el-radio label="3">分拣区</el-radio>
                    <el-radio label="4">高架库区</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div style="width: 100%;position: relative;  background-color: rgba(30,46,65, .3);padding: 16px" v-show="activeName== 'first'">
            <img :src="firstHome" style="width: 100%;height: auto" v-show="first_select_radio=='1'">
            <img :src="gjkImg" style="width: 100%;height: auto" v-show="first_select_radio=='4'">
            <img :src="crkqImg" style="width: 100%;height: auto" v-show="first_select_radio=='2'">
            <img :src="fjqImg" style="width: 100%;height: auto" v-show="first_select_radio=='3'">

            <el-popover
                    v-for="item in circleMarkData"
                    :title="item.title"
                    width="140"
                    :key="item.id"
                    placement="right"
                    trigger="hover">
                <div>
                    <span v-for="contentItem in item.content">{{contentItem}}</br></span>
                </div>
                <div slot="reference" :style="item.style" @click="gotoRishTrendList(item)"
                     class="circle_btn_class">
                    {{item.id}}
                </div>
            </el-popover>
        </div>
        <div style="width: 100%; position: relative;background-color: rgba(30,46,65, .3);padding: 16px" v-show="activeName== 'second'">

            <img :src="cqecImg" style="width: 100%;height: auto">
            <el-popover
                    v-for="item in circleMarkData"
                    :title="item.title"
                    width="140"
                    :key="item.id"
                    placement="right"
                    trigger="hover">
                <div>
                    <span v-for="contentItem in item.content">{{contentItem}}</br></span>
                </div>
                <div slot="reference" :style="item.style" @click="gotoRishTrendList(item)"
                     class="circle_btn_class">
                    {{item.id}}
                </div>
            </el-popover>

        </div>
        <div style="width: 100%; position: relative;  background-color: rgba(30,46,65, .3);padding: 16px" v-show="activeName== 'basement'">

            <img :src="basementHomeImg" style="width: 100%;height: auto">
            <el-popover
                    v-for="item in circleMarkData"
                    :title="item.title"
                    :key="item.id"
                    width="140"
                    placement="right"
                    trigger="hover">
                <div>
                    <span v-for="contentItem in item.content">{{contentItem}}</br></span>
                </div>
                <div slot="reference" :style="item.style" @click="gotoRishTrendList(item)"
                     class="circle_btn_class">
                    {{item.id}}
                </div>
            </el-popover>

        </div>
    </div>
</template>

<script>
    import index_page_bus from './index_page_bus.js'

    export default index_page_bus

</script>

<style lang="less">

    .index_page_class {
        width: 100%;
        height: 100%;
    }


    .index_page_class .tab_select_btn {
        cursor: pointer;
        height: 28px;
        width: 100px;
        font-size: 13px;
        text-align: center;
        line-height: 28px;
        color: #FFFFFF;
        border-radius: 4px
    }

    .index_page_class .circle_btn_class {
        cursor: pointer;
        position: absolute;
        width: 32px;
        height: 32px;
        color: #ffffff;
        border-radius: 32px;
        text-align: center;
        line-height: 32px
    }


</style>
